<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }} 希望不熄，薪火永燃</div>
    <el-col :span="8">
      <el-row text-align="center">
        <el-input-number v-model="num" class="input" :min="1" :max="30" label="描述文字" @change="updateGuanhao"/>
      </el-row>
      <el-row text-align="center">
        <el-checkbox v-model="guanhaoCorrectIsOpen.guanhaoCorrectStatus" class="checkbox" @change="updateGuanhaoCorrectStatus">罐号锁定</el-checkbox>
      </el-row>
      <el-row text-align="center">
        <el-checkbox v-model="boxCodeInferIsOpen.boxCodeInferStatus" class="checkbox" @change="updateBoxCodeInferStatus">喷码推断</el-checkbox>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateGuanhao, updateGuanhaoCorrectStatus, updateBoxCodeInferStatus } from '@/api/camera-setting'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      num: 1,
      guanhaoCorrectIsOpen: {
        guanhaoCorrectStatus: 0
      },
      boxCodeInferIsOpen: {
        boxCodeInferStatus: false
      }
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    updateGuanhaoCorrectStatus() {
      updateGuanhaoCorrectStatus(this.guanhaoCorrectIsOpen)
    },
    updateBoxCodeInferStatus() {
      updateBoxCodeInferStatus(this.boxCodeInferIsOpen)
    },
    updateGuanhao() {
      updateGuanhao(this.num)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.checkbox {
  zoom: 200%;
}

.input {
  zoom: 200%;
}
</style>
